<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客</title>
    <style>
      #app {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }

      .post {
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }

      h1 {
        text-align: center;
        color: #333;
      }

      h2 {
        color: #007bff;
      }

      p {
        color: #555;
        line-height: 1.6;
      }

      .read-more {
        color: #007bff;
        cursor: pointer;
        text-decoration: underline;
      }
    </style>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>博客摘要</h1>
      <div v-for="post in posts" :key="post.id" class="post">
        <h2>{{ post.title }}</h2>
        <p>
          {{ post.showFull ? post.summary : post.summary.slice(0, 100) }}
          <span
            v-if="post.summary.length > 100"
            class="read-more"
            @click="post.showFull = !post.showFull"
          >
            {{ post.showFull ? "[收起]" : "... [查看更多]" }}
          </span>
        </p>
      </div>
    </div>
    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          posts: [
            {
              id: 1,
              title: "Vue.js 入门指南",
              summary:
                "Vue.js 作为一款简洁高效的 JavaScript 框架，在构建交互式 Web 界面时表现出色，对于刚接触它的开发者来说，快速入门并不难。首先，要搭建开发环境，安装 Node.js，它是运行 JavaScript 的基石，安装完成后，利用 npm 这个强大的包管理器，执行npm install -g @vue/cli命令，完成 Vue 脚手架工具的安装。接着，使用vue create my - project指令创建新项目，并按提示选择合适的配置。然后深入理解组件化开发，每个组件包含模板、脚本和样式，通过{{}}语法实现数据绑定，掌握父子组件间通过 props 传值、$emit 触发事件的通信方式，就能开启 Vue.js 的开发之旅。",
              showFull: false, // 控制是否显示完整内容
            },
            {
              id: 2,
              title: "JavaScript 高级技巧",
              summary:
                "JavaScript 是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言。",
              showFull: false,
            },
            {
              id: 3,
              title: "前端性能优化",
              summary:
                "前端性能优化是提升网页加载速度和用户体验的关键。通过减少 HTTP 请求、压缩资源、使用缓存等方法，可以显著提高网页性能。",
              showFull: false,
            },
          ],
        },
      });
    </script>
  </body>
</html>
